<template>
  <el-card class="box-card">
    <!-- 头部 -->
    <div slot="header" class="clearfix">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="form.keyword"
            placeholder="根据编号搜索"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button @click="resetipt">清除</el-button>
        <el-button type="primary" @click="filter">搜索</el-button>
      </div>
    </div>
    <!-- 提示 -->
    <el-alert
      :title="`数据一共${+counts}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="200">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="题型">
        <template slot-scope="scope">
          {{
            scope.row.questionType === "1"
              ? "单选"
              : scope.row.questionType === "2"
              ? "多选"
              : "简答"
          }}
        </template>
      </el-table-column>
      <el-table-column label="题目编号" width="220">
        <template slot-scope="scope">
          <div class="cell">
            <div>
              <a href="#" @click="handleDialog(scope.row)">{{
                scope.row.questionIDs[0].number
              }}</a>
            </div>
            <div>
              <a href="#" @click="handleDialog">{{
                scope.row.questionIDs[1].number
              }}</a>
            </div>
            <div>
              <a href="#" @click="handleDialog">{{
                scope.row.questionIDs[2].number
              }}</a>
            </div>
            <div>
              <a href="#" @click="handleDialog">{{
                scope.row.questionIDs[3].number
              }}</a>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答题时间(s)">
        <template slot-scope="scope">
          {{ scope.row.totalSeconds }}
        </template>
      </el-table-column>
      <el-table-column label="正确率(%)" width="80">
        <template slot-scope="scope">
          {{ scope.row.accuracyRate }}
        </template>
      </el-table-column>
      <el-table-column label="录入人">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="delbtn"
            circle
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="pagesize"
        layout="prev, pager, next,sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </div>
    <!-- 弹出详情 单选-->
    <el-dialog v-if="type==='1'" title="题目预览" :visible.sync="dialogFormVisible" width="900px">
      <div class="el-row">
        <div class="el-col el-col-6">【题型】：单选题</div>
        <div class="el-col el-col-6">【编号】：19</div>
        <div class="el-col el-col-6">【难度】：困难</div>
        <div class="el-col el-col-6">【标签】：语言常识</div>
        <div class="el-col el-col-6">【学科】：java</div>
        <div class="el-col el-col-6">【目录】：java基础</div>
        <div class="el-col el-col-6">【方向】：企业服务</div>
      </div>
      <hr />
      【题干】：
      <p style="color: blue">下列容器中是框架容器的是？</p>
      <div style="padding-bottom: 5px">
        单选题 选项：（以下选中的选项为正确答案）
      </div>
      <el-radio-group v-model="radio">
        <el-radio :label="3">span</el-radio><br />
        <el-radio :label="6">article</el-radio><br />
        <el-radio :label="9">b</el-radio><br />
        <el-radio :label="12">i</el-radio><br />
      </el-radio-group>
      <hr />
      <div>
        【参考答案】：<el-button type="danger" @click="flag = 'block'"
          >视频答案预览</el-button
        >
        <div class="video" :style="`display:${flag}`">
          <video
            src="https://v-cdn.zjol.com.cn/277004.mp4"
            controls="controls"
          ></video>
        </div>
      </div>
      <hr />
      <div class="result">
        【答案解析】：https://element.eleme.cn/#/zh-CN/component/i18n
      </div>
      <hr />
      <div class="result">
        【题目备注】：https://element.eleme.cn/#/zh-CN/component/i18n
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹出详情  多选 -->
    <el-dialog v-else-if="type==='2'" title="题目预览" :visible.sync="dialogFormVisible" width="900px">
      <div class="el-row">
        <div class="el-col el-col-6">【题型】：多选题</div>
        <div class="el-col el-col-6">【编号】：19</div>
        <div class="el-col el-col-6">【难度】：困难</div>
        <div class="el-col el-col-6">【标签】：语言常识</div>
        <div class="el-col el-col-6">【学科】：java</div>
        <div class="el-col el-col-6">【目录】：java基础</div>
        <div class="el-col el-col-6">【方向】：企业服务</div>
      </div>
      <hr />
      【题干】：
      <p style="color: blue">在css中可以直接设置高度的容器是？</p>
      <div style="padding-bottom: 5px">
        多选题 选项：（以下选中的选项为正确答案）
      </div>
      <el-checkbox-group v-model="checkList">
    <el-checkbox label="em"></el-checkbox><br>
    <el-checkbox label="i"></el-checkbox><br>
    <el-checkbox label="section"></el-checkbox><br>
    <el-checkbox label="span"></el-checkbox><br>
    <el-checkbox label="div"></el-checkbox>
  </el-checkbox-group>
      <hr />
      <div>
        【参考答案】：<el-button type="danger" @click="flag = 'block'"
          >视频答案预览</el-button
        >
        <div class="video" :style="`display:${flag}`">
          <video
            src="https://v-cdn.zjol.com.cn/277004.mp4"
            controls="controls"
          ></video>
        </div>
      </div>
      <hr />
      <div class="result">
        【答案解析】：https://element.eleme.cn/#/zh-CN/component/i18n
      </div>
      <hr />
      <div class="result">
        【题目备注】：https://element.eleme.cn/#/zh-CN/component/i18n
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹出详情  简答 -->
    <el-dialog v-else title="题目预览" :visible.sync="dialogFormVisible" width="900px">
      <div class="el-row">
        <div class="el-col el-col-6">【题型】：简答题</div>
        <div class="el-col el-col-6">【编号】：19</div>
        <div class="el-col el-col-6">【难度】：困难</div>
        <div class="el-col el-col-6">【标签】：语言梗</div>
        <div class="el-col el-col-6">【学科】：java</div>
        <div class="el-col el-col-6">【目录】：java基础</div>
        <div class="el-col el-col-6">【方向】：企业服务</div>
      </div>
      <hr />
      【题干】：
      <p style="color: blue">php是世界上最好的语言吗？</p>
      <hr />
      <div>
        【参考答案】：<el-button type="danger" @click="flag = 'block'"
          >视频答案预览</el-button
        >
        <div class="video" :style="`display:${flag}`">
          <video
            src="https://v-cdn.zjol.com.cn/277004.mp4"
            controls="controls"
          ></video>
        </div>
      </div>
      <hr />
      <div class="result">
        【答案解析】：php是世界上最好的语言吗？不知道。
      </div>
      <hr />
      <div class="result">
        【题目备注】：语言梗
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  async created () {
    const { data } = await randoms()
    this.counts = data.counts
    this.page = data.page
    this.pagesize = data.pagesize
    this.tableData = data.items
  },
  data () {
    return {
      counts: 0,
      page: 1,
      pagesize: 20,
      form: {
        keyword: ''
      },
      false: 'false',
      tableData: [],
      currentPage: 1,
      // 弹出数据
      dialogFormVisible: false,
      // 单选框
      radio: 3,
      flag: 'none',
      // 复选框
      checkList: ['section', 'div'],
      // 弹出框展示
      type: '1'
    }
  },
  methods: {
    // 清除input框内容
    resetipt () {
      this.$refs.form.resetFields()
    },
    // 搜索按钮
    async filter () {
      this.currentPage = 1
      const { data } = await randoms({ keyword: this.form.keyword })
      this.counts = data.counts
      this.tableData = data.items
      this.$refs.form.resetFields()
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(row)
          const { data } = await randoms()
          this.tableData = data.items
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页  每页条数改变时触发
    async handleSizeChange (val) {
      this.currentPage = 1
      const { data } = await randoms({ pagesize: val })
      this.tableData = data.items
    },
    // currentPage 改变时会触发
    async handleCurrentChange (val) {
      this.currentPage = val
      const { data } = await randoms({ page: val })
      this.tableData = data.items
    },
    // 弹出dialog  预览详情
    async handleDialog (row) {
      this.dialogFormVisible = true
      // const { data } = await randoms({questionIDs:id});
      // console.log(data)
      this.type = row.questionType
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 10px;
  width: 1061px;
}
.el-input {
  width: 175px;
  height: 32px;
}
::v-deep .el-input__inner {
  height: 32px;
}
.clearfix {
  height: 32px;
  padding-bottom: 20px;
  border-bottom: 0;
}
::v-deep .el-form-item__content {
  width: 175px;
}
.btn {
  float: right;
}
.el-button {
  text-align: center;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  height: 32px;
  width: 56px;
  padding: 0;
}
.el-form {
  display: inline-block;
  height: 32px;
}

::v-deep .el-card__header {
  border-bottom: 0;
}
::v-deep .el-card__body {
  padding-top: 0;
}
// 表格

::v-deep .el-table {
  margin-top: 15px;
  .el-table__header {
    border-bottom: 2px solid #e8e8e8;
    .el-table__cell {
      background-color: #fafafa !important;
    }
  }
}
::v-deep .has-gutter tr {
  height: 68px;
}
.delbtn {
  width: 32px;
  height: 32px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
// 分页器
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
::v-deep .el-pagination__jump {
  margin: 0;
}
.cell a {
  color: rgb(0, 153, 255);
}
// dialog
::v-deep .el-dialog {
  .el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
  }
  .el-col {
    padding: 10px 0;
  }
  .el-radio,
  .el-checkbox {
    padding: 8px 0;
  }
  hr {
    margin: 7px 0;
  }
  .el-button {
    width: 104px;
    height: 32px;
  }
  .video {
    width: 400px;
    height: 300px;
    video {
      width: 400px;
      height: 300px;
    }
  }
  .result {
    margin: 14px 0;
  }
  .el-dialog__footer {
    text-align: right;
    .el-button {
      width: 70px;
      height: 36px;
    }
  }
}
</style>
